<template>
    <div class="qilin-QilinDialog">
        <el-dialog
            :visible.sync="ownDialogConfig.isShow"
            :title="ownDialogConfig.title || '提示' "
            :close-on-click-modal="ownDialogConfig.closeOnClickModal || false "
            :close-on-press-escape="ownDialogConfig.closeOnPressEscape || false "
            :modal-append-to-body="ownDialogConfig.modalAppendToBody || true "
            :append-to-body="ownDialogConfig.appendToBody || true "
            :width="ownDialogConfig.width || '500px' "
            :center="ownDialogConfig.center || true "
            :before-close="handleClose"
        >
            <slot></slot>
            <div slot="footer">
                <el-button type="default" size="small" @click="handleClose">
                    {{ownDialogConfig.closeText || "取消"}}
                </el-button>
                <el-button type="primary" size="small" @click="$emit('submitConfirm')">
                    {{ownDialogConfig.confirmText || "确认"}}
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name:"QilinDialog",
    props:{
        dialogConfig:{
            type:Object,
            default(){
                return {}
            }
        }
    },
    watch:{
        dialogConfig:{
            handler(newValue,oldValue){
                this.initOwnDialogConfig(newValue);
            },
            immediate:true
        }
    },
    data(){
        return {
            // 组件自身的默认配置
            ownDialogConfig:{}
        }
    },
    methods:{
        // 将传来的配置赋值给组件自身
        initOwnDialogConfig(target){
            this.ownDialogConfig=target;
        },
        // 点击关闭按钮事件监听
        handleClose(){
            this.$emit("handleClose");
        }
    }
}
</script>